<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="李愧愧">
    <title></title>
    <style>
        .box {
            width: 600px;
            height: 300px;
            margin: 0 auto;
        }

        .box1 {
            width: 300px;
            height: 100px;
            border: 2px solid orange;
            background-color: khaki;
            margin-top: 10px;
            font-size: 20px;
            font-weight: bold;
            display: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box2"><input type="checkbox" name="" id="">两周内自动登录</div>
        <div class="box1">
            为了您的信息安全，请不要在网吧或公用电脑上使用此功能！
        </div>
    </div>
    <script>
        var checkbox = document.querySelector('.box2');
        console.dir(checkbox);
        var box1 = document.querySelector('.box1');
        console.dir(box1);
        checkbox.onclick = function (ev){
            box1.style = 'display: block;'
            ev.stopPropagation();
        }
        document.body.onclick = function (){
            box1.style = 'display: none;'
        }
    </script>
</body>

</html>